<ul>

<!-- ============表格搜索组件开始============= -->
    <li>
        <p class="zhedie_title zd_on">【表格搜索组件】</p>
        <div class="xmp_body first">
        <div class="xmp_box">
            <span class="xmp_title">【html码】</span>
            <xmp>
<div class="global_table_search">
    <div class="search_input global_left">
        <p class="s_title global_left">
            <span>搜索标题</span>
        </p>
        <p class="s_input global_left">
            <input type="text" class="global_input" />
        </p>
        <p class="s_button global_left">
            <button type="button" class="global_btn global_button">查询</button>
        </p>
    </div>
    <div class="search_button global_right">
        <p>
            <button type="button" class="global_btn global_button">添加</button>
            <button type="button" class="global_btn global_button">编辑</button>
            <button type="button" class="global_btn global_button">删除</button>
        </p>
    </div>
</div>
            </xmp>
        </div>
        </div>
    </li>
<!-- ============表格搜索组件结束============= -->

<!-- ============表格组件开始============= -->
    <li>
        <p class="zhedie_title">【表格组件】</p>
        <div class="xmp_body">
        <div class="xmp_box">
            <span class="xmp_title">【html码】</span>
            <xmp>
<div class="global_table">
    <div class="head_bj global_btn">
    </div>
    <table>
        <thead>
            <tr>
                <th class="text-center"><input type="checkbox" /></th>
                <th class="text-left">标题02</th>
                <th class="text-left">标题03</th>
                <th class="text-left">标题04</th>
                <th class="text-center">标题05</th>
                <th class="text-center">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="text-center"><input type="checkbox" /></td>
                <td>data</td>
                <td><a href="javascript:;" class="table_link" target="_block">www.baidu.com</a></td>
                <td>data</td>
                <td class="text-center"><a href="javascript:;" class="yellow_btn">在办件</a></td>
                <td class="text-center">
                    <div class="caozuo">
                        <a href="javascript:;" class="caozuo01"></a>
                        <a href="javascript:;" class="caozuo02"></a>
                        <a href="javascript:;" class="caozuo03"></a>
                        <a href="javascript:;" class="caozuo04"></a>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="text-center"><input type="checkbox" /></td>
                <td>data</td>
                <td><a href="javascript:;" class="table_link" target="_block">www.baidu.com</a></td>
                <td>data</td>
                <td class="text-center"><a href="javascript:;" class="green_btn">办结件</a></td>
                <td class="text-center">
                    <div class="caozuo">
                        <a href="javascript:;" class="caozuo01"></a>
                        <a href="javascript:;" class="caozuo02"></a>
                        <a href="javascript:;" class="caozuo03"></a>
                        <a href="javascript:;" class="caozuo04"></a>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
            </xmp>
            <span class="xmp_tip">
                添加global_table2类为第二种表格样式，即所有单元格居中显示，内嵌边框线
            </span>
        </div>
        <div class="xmp_box">
            <span class="xmp_title">【说明】</span>
            <xmp>
            </xmp>
            <span class="xmp_tip">
                注：页面需要引入table.js
            </span>
        </div>
        <div class="xmp_box">
            <span class="xmp_title">【引入方式】</span>
            <xmp>
<script type="text/javascript" src="../../js/common/table.js"></script>
            </xmp>
        </div>
        </div>
    </li>
<!-- ============表格组件结束============= -->

<!-- ============上传按钮组件开始============= -->
    <li>
        <p class="zhedie_title">【上传按钮组件】</p>
        <div class="xmp_body">
        <div class="xmp_box">
            <span class="xmp_title">【html码】</span>
            <xmp>
<div class="global_file">
    <label class="file_box flie_label">
        上传附件
        <input type="file" class="file_box" id="file" onchange="g_upload(2)">
    </label>
    <span id="show_text"></span>
</div>
            </xmp>
        </div>
        <div class="xmp_box">
            <span class="xmp_title">【说明】</span>
            <xmp>
            </xmp>
            <span class="xmp_tip">
                注：页面需要引入upload.js并配合弹框插件使用<br/>
                g_upload(1) 验证图片格式<br/>
                g_upload(2) 验证文本格式<br/>
                g_upload(3) 两种方式都验证
            </span>
        </div>
        <div class="xmp_box">
            <span class="xmp_title">【引入方式】</span>
            <xmp>
<link rel="stylesheet" type="text/css" href="../../css/common/dsdialog.css" />
<script type="text/javascript" src="../../js/common/dsdialog.js"></script>
<script type="text/javascript" src="../../js/common/upload.js"></script>
            </xmp>
        </div>
        </div>
    </li>
<!-- ============上传按钮组件结束============= -->

<!-- ============模态框组件开始============= -->
    <li>
        <p class="zhedie_title">【模态框组件】</p>
        <div class="xmp_body">
        <div class="xmp_box">
            <span class="xmp_title">【触发按钮】</span>
            <xmp>
<button type="button" class="global_btn global_button" onclick="modal($(this),'标题','关闭','确定')" data-id="modal01">
    触发按钮
</button>
            </xmp>
            <span class="xmp_tip">第二个参数为必传，后两个参数可选，$(this)为当前对象必须传入</span>
        </div>
        <div class="xmp_box">
            <span class="xmp_title">【模态框主体】</span>
            <xmp>
<div class="modal_html" id="modal01">
    <div class="modal_head">
        <span></span>
    </div>
    <div class="modal_body">
        <div class="modal_box">
            这里写html代码
        </div>
    </div>
    <div class="modal_footer">
        <div class="modal_btn">
            <button type="button" class="global_button cancel"></button>
            <button type="button" class="global_btn global_button sure"></button>
        </div>
    </div>
</div>
            </xmp>
            <span class="xmp_tip">
                注：需要放在页面最外层<br/>
                id必须和触发按钮的data-id值保持一致
            </span>
        </div>
        <div class="xmp_box">
            <span class="xmp_title">【遮罩层】</span>
            <xmp>
<div class="mask_layer">
</div>
            </xmp>
            <span class="xmp_tip">注：需要放在页面最外层</span>
        </div>
        <div class="xmp_box">
            <span class="xmp_title">【引入方式】</span>
            <xmp>
<script type="text/javascript" src="../../js/common/Modal.js"></script>
            </xmp>
        </div>
        </div>
    </li>
<!-- ============模态框组件结束============= -->


<!-- ============load切换组件开始==============-->
<li>
        <p class="zhedie_title">【load切换组件】</p>
        <div class="xmp_body">
        <div class="xmp_box">
            <span class="xmp_title">【切换按钮】</span>
            <xmp>
<ul class="qhBtn">
    <li class="qh1 on" onclick="qh(1)">切换标题一</li>
    <li class="qh2" onclick="qh(2)">切换标题二</li>
</ul>
            </xmp>
            <span class="xmp_tip">.on类为选中的样式</span>
        </div>
        <div class="xmp_box">
            <span class="xmp_title">【切换页面】</span>
            <xmp>
<div class="load_page">
    <div class="page_ani">
        <span><img src="../../images/loading.gif" /></span>
    </div>
    <div class="page_box">
    </div>
</div>
            </xmp>
        </div>
        <div class="xmp_box">
            <span class="xmp_title">【引入方式】</span>
            <xmp>
<script type="text/javascript" src="../../js/common/change.js"></script>
            </xmp>
        </div>
        <div class="xmp_box">
            <span class="xmp_title">【说明】</span>
            <xmp>
            </xmp>
            <span class="xmp_tip">需要在同级目录下新建加载页面page01.html、page02.html以此类推</span>
        </div>
        </div>
    </li>
<!-- ============load切换组件结束==============-->


</ul>